import React, { Component } from 'react'
import { connect } from 'react-redux'
import { ReplayAction } from '@act'
import { ReplayVideoPlayer } from '@utils/Global'
const { toggleShowType } = ReplayAction

class ReplayVideo extends Component {
  clickSkip = () => {
    const { dispatch } = this.props
    dispatch(toggleShowType('videoMask', false))
    ReplayVideoPlayer.skipVideo()
  }
  render() {
    const { showVideo } = this.props
    return (
      <div className="replay_video_mask" style={{ display: showVideo ? 'block' : 'none' }}>
        <div onClick={this.clickSkip} className="skip_btn">跳过视频</div>
        <video id="replayVideo" className="replay_video" src=""></video>
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    showVideo: state.ReplayState.showType.videoMask
  }
}

export default connect(mapStateToProps)(ReplayVideo)
